<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('工作量统计列表')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>报表：</label>
                            <select class="form-control" name="datess" id="datess">
                                <option value="1">月报表</option>
                                <option value="2">季报表</option>
                                <option value="3">周报表</option>

                            </select>
                        </li>
                        <li>
                            <label>开始时间：</label>
                            <input type="text" class="form-control" th:value="${startTime}"  name="startTime" id="startTime"
                                   placeholder="截止时间"/>
                        </li>
                        <li>
                            <label> 结束时间：</label>
                            <input type="text" class="form-control" name="endTime" id="endTime"
                                   placeholder="截止时间"/>
                        </li>


                        <li>
                            <label>选择客服：</label>
                            <select class="form-control" name="agentId" th:with="type=${@dict.getType('sys_user_kf')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}">
                                </option>
                            </select>
                        </li>


                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">

            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:zzltj:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>


<script th:inline="javascript">



    $(function () {
        layui.use('laydate', function () {

            function getMonthStart() {
                var now = new Date(); // 获取当前日期时间
                var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
                return monthStart;
            }

            function getMonthEnd() {
                var now = new Date(); // 获取当前日期时间
                var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
                return monthEnd;
            }

            layui.laydate.render({
                elem: '#endTime',
                theme: 'molv',
                value: getMonthEnd(),
                trigger: 'click',
                type: 'datetime'
            })
            layui.laydate.render({
                elem: '#startTime',
                theme: 'molv',
                trigger: 'click',
                value: getMonthStart(),
                type: 'datetime'
            })
        });

        var editFlag = [[${@permission.hasPermi('system:zzltj:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:zzltj:remove')}]];
        var prefix = ctx + "system/zzltj";

        document.querySelector('#datess').addEventListener('change', function () {
            var selectedValue = this.value;
            let start_time = ''
            let end_time = ''

            if (selectedValue == '1') {


                layui.use('laydate', function () {

                    function getMonthEnd() {
                        var now = new Date(); // 获取当前日期时间
                        var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
                        var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
                        console.log('本月开始时间：' + monthStart);
                        console.log('本月结束时间：' + monthEnd);

                        return monthEnd;
                    }

                    layui.laydate.render({
                        elem: '#endTime',
                        theme: 'molv',
                        value: getMonthEnd(),
                        trigger: 'click',
                        type: 'datetime'
                    })
                });

                layui.use('laydate', function () {

                    function getMonthStart() {
                        var now = new Date(); // 获取当前日期时间
                        var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
                        var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
                        console.log('本月开始时间：' + monthStart);
                        console.log('本月结束时间：' + monthEnd);
                        return monthStart;
                    }

                    layui.laydate.render({
                        elem: '#startTime',
                        theme: 'molv',
                        trigger: 'click',
                        value: getMonthStart(),
                        type: 'datetime'
                    })
                });

            } else if (selectedValue == '3') {
                //设置查询时间为周报表
                let monthRange = getCurrentToPreviousDateTimeRange('week');
                start_time = monthRange.end
                end_time = monthRange.start
                console.log(start_time)
                console.log(end_time)
            } else if (selectedValue == '2') {


// 使用季度
                const {start, end} = getCurrentSeasonStartEnd();
                console.log('本季度开始时间：' + start);
                console.log('本季度结束时间：' + end);
                layui.laydate.render({
                    elem: '#startTime',
                    theme: 'molv',
                    trigger: 'click',
                    value: start,
                    type: 'datetime'
                });

                layui.laydate.render({
                    elem: '#endTime',
                    theme: 'molv',
                    value: end,
                    trigger: 'click',
                    type: 'datetime'
                })

            }
            //   $("#startTime").val(start_time)
            //   $("#endTime").val(end_time)
        });


        function getCurrentSeasonStartEnd(referenceDate = new Date()) {
            const month = referenceDate.getMonth(); // 0-11
            const year = referenceDate.getFullYear();

            // 计算当季的开始月份和年份
            const seasonStartMonth = Math.floor(month / 3) * 3;
            const seasonStartYear = month % 3 === 0 ? year : year - 1;

            // 计算当季的结束月份和年份
            const seasonEndMonth = seasonStartMonth + 2;
            const seasonEndYear = seasonStartMonth === 11 ? year + 1 : year;

            // 获取当季的开始和结束日期
            const seasonStart = new Date(seasonStartYear, seasonStartMonth, 1);
            const seasonEnd = new Date(seasonEndYear, seasonEndMonth + 1, 0, 23, 59, 59);

            return {
                start: seasonStart,
                end: seasonEnd,
            };
        }


        // 格式化日期时间为YYYY-MM-DD HH:mm:ss格式
        function formatDateTime(dateTime) {
            let year = dateTime.getFullYear();
            let month = (1 + dateTime.getMonth()).toString().padStart(2, '0');
            let day = dateTime.getDate().toString().padStart(2, '0');

            const now = new Date();
            let hours = now.getHours();
            if (hours < 10) {
                hours = '0' + hours
            }
            let minutes = now.getMinutes();
            if (minutes < 10) {
                minutes = '0' + hours
            }
            let seconds = now.getSeconds();
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }


        // 获取时间
        function getCurrentToPreviousDateTimeRange(interval) {
            // 获取当前时间
            let currentDateTime = new Date();
            // 根据传入的间隔计算之前的时间
            let previousDateTime;
            switch (interval) {
                case 'week':
                    previousDateTime = new Date(currentDateTime - 7 * 24 * 60 * 60 * 1000);
                    break;
                case 'month':
                    var now = new Date(); // 获取当前日期时间
                    var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
                    var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）

                    previousDateTime = monthStart;

                    currentDateTime = monthEnd;

                    break;
                case 'ji':
                    previousDateTime = new Date(currentDateTime.getFullYear(), currentDateTime.getMonth() - 3, currentDateTime.getDate());
                    break;
                case 'year':
                    previousDateTime = new Date(currentDateTime.getFullYear() - 1, currentDateTime.getMonth(), currentDateTime.getDate());
                    break;
                default:
                    throw new Error('Invalid interval');
            }

            // 返回时间区间
            return {
                start: formatDateTime(currentDateTime),
                end: formatDateTime(previousDateTime)
            };
        };

        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "工作量统计",


            columns: [{
                checkbox: true
            },
                {
                    field: 'zxname',
                    title: '坐席名字',
                    visible: true
                },
                {
                    field: 'hrjt',
                    title: '呼入接听'
                },
                {
                    field: 'hrwj',
                    title: '呼入未接'
                },
                {
                    field: 'jtlv',
                    title: '接听率'

                },
                {
                    field: 'hrzsc',
                    title: '呼入总时长'

                },
                {
                    field: 'hravetime',
                    title: '呼入平均时间'

                },
                {
                    field: 'whzsc',
                    title: '外呼总时长'

                },
                {
                    field: 'whavetime',
                    title: '外呼平均时长'


                }]
        };
        $.table.init(options);
        $.table.search();
    });
</script>
</body>
</html>